/**
 * @desc 登录后设置新密码，并短信验证的表单页
 * @author yd_zhaorongjun
 */
<template>
  <div class="messageReceived gl_contentBox gl_heightFull">
    <template>
      <el-form ref="MessageReceivedDto" class="gl_form_mini" :model="MessageReceivedDto" :rules="MessageReceivedDto_Rules" label-position="right" label-width="110px">
        <!-- 超管用户名 -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="超管用户名" prop="phone">
              <el-input v-model="MessageReceivedDto.phone" placeholder="请输入超管手机号" name="name" type="text" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 登录密码 -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="新密码" prop="password">
              <el-input v-model="MessageReceivedDto.password" :type="passwordType" placeholder="请输入新密码" name="password" size="mini">
                <el-button slot="append" class="show-pwd" @click="showPwd">
                  <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                </el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 确认密码 -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="新密码确认" prop="confirmPassword">
              <el-input v-model="MessageReceivedDto.confirmPassword" :type="confirmPasswordType" placeholder="新密码确认" name="confirmPassword" size="mini">
                <el-button slot="append" class="show-pwd" @click="showConfirmPwd">
                  <svg-icon :icon-class="confirmPasswordType === 'password' ? 'eye' : 'eye-open'" />
                </el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 验证码 -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="验证码" prop="verifyCode">
              <el-input
                v-model.trim="MessageReceivedDto.verifyCode"
                class="verifycode_input"
                type="text"
                minlength="4"
                maxlength="4"
                size="mini"
                :placeholder="$t('rules.verifyCode')"
              >
                <el-button v-if="!isSendMsg" slot="append" style="width:110px" @click="sendPhoneMSG">
                  <span>{{ $t('register.sendMSG') }}</span>
                </el-button>
                <el-button v-else slot="append" class="noClick" style="width:110px">
                  <span>{{ reSendTime }}(s)</span>
                </el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-button :loading="loading" type="primary" class="gl_button_long" size="mini" @click="clickSave">{{ $t('button.save') }}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </div>
</template>
<script>
import validator from '@/lib/validate/index.js';
import { translateByCode } from '@/lib/getTransData';
import { MessageReceivedDto } from '@/lib/form/tenantManagement.js';
export default {
  name: 'MessageReceived',
  components: {
  },
  data() {
    return {
      MessageReceivedDto: new MessageReceivedDto(),
      MessageReceivedDto_Rules: { // 必填项，验证密码格式
        // 联系人手机
        phone: [
          validator.required('手机号不能为空'),
          {
            validator(rule, value, callback) {
              callback(validator.checkPhone(value, translateByCode('rules.validTelephone')));
            },
            trigger: 'blur'
          }
        ],
        password: [
          validator.required(translateByCode('rules.requiredPassword')),
          {
            validator (rule, value, callback) {
              callback(validator.checkPwd(value, translateByCode('rules.validPassword')));
            },
            trigger: 'blur'
          }
        ],
        confirmPassword: [
          validator.required(translateByCode('rules.requiredPassword')), // 必填项
          {
            validator (rule, value, callback) { // 验证密码格式
              callback(validator.checkPwd(value, translateByCode('rules.validPassword')));
            },
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => { // 两次输入是否一致
              if (value !== this.MessageReceivedDto.password) {
                callback(new Error('erroe'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
            message: translateByCode('rules.different')
          }
        ],
        verifyCode: [
          {
            required: true,
            message: translateByCode('rules.verifyCode'),
            trigger: 'blur'
          },
          {
            min: 4,
            max: 4,
            message: translateByCode('rules.validVerifyCode'),
            trigger: 'blur'
          },
          {
            validator(rule, value, callback) {
              callback(validator.checkVerifyCode(value, translateByCode('rules.validAPIVerifyCode')));
            },
            trigger: 'blur'
          }
        ]
      },
      isSendMsg: false, // 是否已经发送验证码
      reSendTime: 0, // 验证码倒计时
      passwordType: 'password',
      confirmPasswordType: 'password',
      loading: false
    };
  },
  methods: {
    // 切换密码显示状态
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = '';
      } else {
        this.passwordType = 'password';
      }
    },
    // 切换确认密码显示状态
    showConfirmPwd() {
      if (this.confirmPasswordType === 'password') {
        this.confirmPasswordType = '';
      } else {
        this.confirmPasswordType = 'password';
      }
    },
    // 立即注册按钮
    clickSave() {
      this.$refs.MessageReceivedDto.validate(valid => {
        if (valid) {
          this.loading = true;
          //   accountRegister(this.$refs.MessageReceivedDto['MessageReceivedDto']).then(response => {
          //     this.loading = false;
          this.$message({
            message: '保存成功！',
            type: 'success'
          });
          this.$router.push({
            path: '/'
          });
          // })
          //   .catch(() => {
          //     this.loading = false;
          //     this.$message({
          //       type: 'warning',
          //       message: error
          //     });
          //   });
        } else {
          return false;
        }
      });
    },
    // 发送手机验证码
    sendPhoneMSG() {
      this.countDownTime(60);
    },
    // 短信倒计时
    countDownTime (num) {
      let timer = null;
      clearInterval(timer);
      this.isSendMsg = true;
      this.reSendTime = num;
      timer = setInterval(() => {
        this.isSendMsg = true;
        this.reSendTime -= 1;
        if (this.reSendTime <= 0) {
          clearInterval(timer);
          this.isSendMsg = false;
        }
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.right-menu-item {
  float: right;
  padding: 20px 40px;
  height: 100%;
  font-size: 26px;
  color: #fff;
  vertical-align: text-bottom;

  &.hover-effect {
    cursor: pointer;
    transition: background 0.3s;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }
}
.el-button.noClick{
  cursor: auto;
}
.verifyCode_icon{
  padding: 6px 5px 6px 15px;
  color: #889aa4;
  vertical-align: middle;
  width: 30px;
  display: inline-block;
  position: absolute;
}
.backToLogin{
    color: #fff;
    text-align: right;
    padding-top: 10px;
  .backToLogin_canClick{
    cursor: pointer;
  }
  .backToLogin_canClick:hover{
    color: #1890ff;
  }
}
.messageReceived{
  width: 400px;
}
</style>
